// 引入react
import * as React from 'react';
import {StyleSheet, View, Text, ScrollView, Dimensions, TouchableOpacity} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import AllStyle from '../../../../../../style';
import {HeaderTitle} from '../../../../../../componet/settingComponent/HeaderTitle';
import {BottomButton} from '../../../../../../componet/settingComponent/BottomButton';
import {CardItem} from '../../../../../../componet/settingComponent/CardItem';
import {BrLine} from '../../../../../../componet/settingComponent/BrLine';
import DatePicker from 'react-native-date-picker';
import {Drawer} from '../../../../../../componet/Drawer';
import {getDate, getTimer} from '../../../../../../utils/DateUtils';
import {Toast} from '../../../../../../utils/Toast';

const width = Dimensions.get('window').width;

/**
 * @Description:
 * @author TangYong
 * @date 2022/12/19
 */
export class SpecialDate extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tureSignListIndex: null,
            notSignListIndex: null,
            visible: false,
            chosenDate: new Date(),
            choseVal: true,//必须打卡日期or不用打卡日期
            notSignList: this.props.route.params.notSignList,
            tureSignList: this.props.route.params.tureSignList,
            headerTitle: this.props.route.params.title,
        };
    }

    //生命周期：组件挂载后
    componentDidMount() {
    }

    //方法
    setChoseVal = (val) => {
        this.setState({choseVal: val});
    };
    goto = (name, params) => {

        const route = {
            name: name,
            params: {
                ...params,
            },

        };
        this.props.navigation.navigate(route);
    };

    //添加一个日期
    addDates() {
        let lists;
        if (this.state.choseVal == true) {
            lists = this.state.tureSignList;
            lists.push(null);
            this.setState({tureSignList: lists});
        } else {
            lists = this.state.notSignList;
            lists.push(null);
            this.setState({notSignList: lists});
        }
    }

    //设置不用打卡日期索引
    setNotSignList = (index) => {
        this.setState({notSignListIndex: index});
        this.setState({visible: true});
    };
    //设置打卡日期索引
    setTureSignList = (index) => {
        this.setState({tureSignListIndex: index});
        this.setState({visible: true});
    };

    //确认
    onOk = () => {
        let tureSignList = this.state.tureSignList;
        let notSignList = this.state.notSignList;
        let index;
        let date = getDate(this.state.chosenDate, 'yyyy-MM-dd') + ' 00:00:00';
        let allList = [...tureSignList, ...notSignList];
        if (allList.indexOf(date) != '-1') {
            Toast.showWarning(date.substring(0, 10) + '必须打卡日期和不用打卡日期不能为同一天,请检查！');
            this.setState({visible: false});
            return
        }
        //判断是必须打卡还是不用打卡日期
        if (this.state.choseVal == true) {
            index = this.state.tureSignListIndex;
            tureSignList[index] = date;
            this.setState({tureSignList: tureSignList});
        } else {
            index = this.state.notSignListIndex;
            notSignList[index] = date;
            this.setState({notSignList: notSignList});
        }
        this.setState({visible: false});
    };
    //取消
    onCancel = () => {
        let lists;
        let index;
        //判断是必须打卡还是不用打卡日期
        if (this.state.choseVal == true) {
            lists = this.state.tureSignList;
            index = this.state.tureSignListIndex;
            lists.splice(index, 1);
            this.setState({tureSignList: lists});
        } else {
            lists = this.state.notSignList;
            index = this.state.notSignListIndex;
            lists.splice(index, 1);
            this.setState({notSignList: lists});
        }
        this.setState({visible: false});
    };
    setDate = (date) => {
        this.setState({chosenDate: date});
    };

    //DOM
    render() {
        return (
            <SafeAreaView edges={['top', 'left', 'right']} style={{flex: 1, backgroundColor: '#FFF'}}>
                <View style={AllStyle.container}>
                    <HeaderTitle goBack={() => {
                        this.goto('SignPeriod', {
                            title: '考勤日期',period:{
                                notSignList:this.state.notSignList,
                                tureSignList:this.state.tureSignList
                            }

                        });
                    }} headtitle={this.state.headerTitle}
                    />
                    <View style={style.tab}>
                        <View style={style.tab_r}>
                            <TouchableOpacity onPress={() => {
                                this.setChoseVal(true);
                            }}>
                                <Text
                                    style={[style.text, {color: this.state.choseVal == true ? '#000' : '#9FA5AB'}]}>必须打卡日期</Text>
                            </TouchableOpacity>
                        </View>

                        <View style={style.tab_l}>
                            <TouchableOpacity onPress={() => {
                                this.setChoseVal(false);
                            }}>
                                <Text
                                    style={[style.text, {color: this.state.choseVal == true ? '#9FA5AB' : '#000'}]}>不用打卡日期</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                    <View style={style.line}>
                        <View
                            style={[style.line_l, {borderBottomColor: this.state.choseVal == true ? '#409EFF' : '#fff'}]}>

                        </View>
                        <View
                            style={[style.line_l, {borderBottomColor: this.state.choseVal == false ? '#409EFF' : '#fff'}]}>
                        </View>
                    </View>
                    <ScrollView style={AllStyle.padding15}>
                        <TouchableOpacity onPress={() => this.addDates()}>
                            <View style={AllStyle.card}>
                                <Text style={AllStyle.btn_add}>添加一个日期</Text>
                            </View>
                        </TouchableOpacity>

                        {this.state.choseVal == true ? (
                            <View style={AllStyle.card}>
                                {this.state.tureSignList.map((i, index) => {
                                    return [
                                        <TouchableOpacity  onPress={() => this.setTureSignList(index)}>
                                            <CardItem key={index} title={'必须打卡日期'} value={i==null?i:i.substring(0,10)}></CardItem>
                                        </TouchableOpacity>,
                                        <BrLine></BrLine>,
                                    ];
                                })}
                            </View>
                        ) : (
                            <View style={AllStyle.card}>
                                {this.state.notSignList.map((i, index) => {
                                    return [
                                        <TouchableOpacity  onPress={() => this.setNotSignList(index)}>
                                            <CardItem key={index} title={'不用打卡日期'} value={i==null?i:i.substring(0,10)}></CardItem>
                                        </TouchableOpacity>,
                                        <BrLine></BrLine>,
                                    ];
                                })}
                            </View>
                        )}


                    </ScrollView>
                    <Drawer visible={this.state.visible} onShow={() => this.onOk()} dismiss={() => this.onCancel()}>
                        <DatePicker
                            style={{width: width}}
                            mode='date'
                            locale="zh_GB"
                            date={this.state.chosenDate}
                            onDateChange={(date) => {
                                this.setDate(date);
                            }}
                        ></DatePicker>
                    </Drawer>
                </View>
            </SafeAreaView>
        );
    }

}

const style = StyleSheet.create({
    //样式
    tab: {
        marginTop: -2,
        backgroundColor: '#FFF',
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    tab_r: {
        flexDirection: 'row',
        width: '50%',
        justifyContent: 'center',

    },
    tab_l: {
        flexDirection: 'row',
        width: '50%',
        justifyContent: 'center',
    },
    text: {
        fontSize: 16,
        padding: 15,
    },
    line: {
        width: '100%',
        backgroundColor: '#FFF',
        flexDirection: 'row',
        justifyContent: 'space-around',
    },
    line_l: {
        // 【方法一】用border做分割线
        borderBottomColor: '#409EFF',
        borderBottomWidth: 3,
        width: 30,
        flexDirection: 'row',
        justifyContent: 'center',
    },
});

